<template>
    <div class="container">
        <div class="box1" style="height: 10%;">
            个人统计
        </div>
        <div class="box" style="height: 20%; ">
            <div class="sub-box" v-for="item in 3" :key="item" style="width: 33%;">
                <div style="height: 100%; width: 50%;">
                    <i class="el-icon-s-claim" style="font-size: 50px; line-height: 176px"></i>
                </div>
                <div style="height: 100%; width: 50%">
                    <div style="height: 70%; line-height: 123px; font-size: 30px;">{{ datalength[item-1] }}</div>
                    <div style="height: 30% ;line-height: 52px;">{{ data[item - 1] }}</div>
                </div>
            </div>
        </div>
        <div class="dbox" style="height: 40%;  ">
            <div style="height: 20%;width: 100%;display: flex;justify-content:space-between">
                <div>近七日处理数据</div>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="周" name="first"></el-tab-pane>
                        <el-tab-pane label="月" name="second"></el-tab-pane>
                        <el-tab-pane label="年" name="third"></el-tab-pane>

                    </el-tabs>

                </div>
            </div>
            <div style="height: 80%;width: 100%;">
                <div id="chart" style="width:100%;height:100%;"></div>
            </div>
        </div>
        <div class="dbox" style="height: 30%; ">
            <div style="text-align: left;">待我处理的故障</div>
            <div class="table">
                <div id="chart1" style="width:100%;height:100%;"></div>
                <div id="chart2" style="width:100%;height:100%;"></div>
                <div id="chart3" style="width:100%;height:100%;"></div>
                <div id="chart4" style="width:100%;height:100%;"></div>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: ['待处理故障', '已处理故障', '我提交的故障'],
            datalength:[]


        }

    },
   

    mounted() {
        this.$axios.get(`test`,
        ).then((v)=>{
            this.datalength=[v.data[0].id,v.data[1].id,v.data[2].id]
          
        })

        var chartDom = document.getElementById('chart');
        var myChart = this.$echarts.init(chartDom);
        var chartDom1 = document.getElementById('chart1');
        var myChart1 = this.$echarts.init(chartDom1);
        var chartDom2 = document.getElementById('chart2');
        var myChart2 = this.$echarts.init(chartDom2);
        var chartDom3 = document.getElementById('chart3');
        var myChart3 = this.$echarts.init(chartDom3);
        var chartDom4 = document.getElementById('chart4');
        var myChart4 = this.$echarts.init(chartDom4); 
        var option;
        var option1;
        var option2;
        var option3;
        var option4; 

        option = {
            title: {
                text: 'Stacked Line',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新增故障数', '处理故障数'],
                left: "left"
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {

                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['9.2', '9.3', '9.4', '9.5',  '9.6', '9.7','9.8']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增故障数',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '处理故障数',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },

            ]
        };
        option && myChart.setOption(option);

        option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                show: false,
            },
            series: [
                {
                  
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 15,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 50, name: '已超时' },
                        { value: 120, name: '未超时' },
                       
                    ]
                }
            ]
        };
        option1 && myChart1.setOption(option1);
        
        option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                show: false,
            },
            series: [
                {
                  
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 15,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 50, name: '已超时' },
                        { value: 120, name: '未超时' },
                       
                    ]
                }
            ]
        };
        option2 && myChart2.setOption(option2);

        option3 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                show: false,
            },
            series: [
                {
                  
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 15,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 50, name: '已超时' },
                        { value: 120, name: '未超时' },
                       
                    ]
                }
            ]
        };
        option3 && myChart3.setOption(option3);

        option4 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                show: false,
            },
            series: [
                {
                  
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 15,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 50, name: '已超时' },
                        { value: 120, name: '未超时' },
                       
                    ]
                }
            ]
        };
        option4 && myChart4.setOption(option4);
    }
}
</script>
<style scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.table {
    display: flex;
    width: 100%;
    height: 80%;
}

.box {
    width: 100%-5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 15px;
}

.box1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px 15px;

}

.dbox {
    margin: 5px 15px;
}

.sub-box {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: left;
    margin-right: 5px;
    border: 1px solid;


}

.sub-sub-box {
    width: 100%;
}

.box2 {
    height: 100%;
    width: 50%;
    display: inline-block;

}

::v-deep .el-tabs__item {
    padding: 0px 5px;
}
</style>
  